<template>
  <el-form label-position="top">
    <el-form-item label="预览布局">
      <el-radio-group v-model="previewLayoutModel.direction">
        <el-radio-button label="row">水平</el-radio-button>
        <el-radio-button label="column">垂直</el-radio-button>
        <el-radio-button label="grid">网格</el-radio-button>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="间距">
      <el-slider
        v-model="previewLayoutModel.gap"
        :min="0"
        :max="50"
        :step="1"
        show-input
      />
    </el-form-item>
    
    <el-form-item label="列数" v-if="previewLayoutModel.direction === 'grid'">
      <el-slider
        v-model="previewLayoutModel.columns"
        :min="1"
        :max="6"
        :step="1"
        show-stops
        show-input
      />
    </el-form-item>
    
    <el-divider />
    
    <el-form-item label="预览数量">
      <el-input-number
        v-model="previewCountModel"
        :min="1"
        :max="10"
        :step="1"
        controls-position="right"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'PreviewSettings',
  props: {
    previewCount: {
      type: Number,
      default: 1
    },
    previewLayout: {
      type: Object,
      required: true
    }
  },
  emits: ['update:previewCount', 'update:previewLayout'],
  setup(props, { emit }) {
    // 使用计算属性创建双向绑定
    const previewCountModel = computed({
      get: () => props.previewCount,
      set: (value) => emit('update:previewCount', value)
    })
    
    const previewLayoutModel = computed({
      get: () => props.previewLayout,
      set: (value) => emit('update:previewLayout', value)
    })
    
    return {
      previewCountModel,
      previewLayoutModel
    }
  }
})
</script>